<template>
  <view class="settings-page">
    <!-- 顶部导航栏 -->
     <view>
      <CustomNavBar 
        title="设置"
        backType="redirect"
        redirectUrl="/pages/me/me"
      />

     </view>
    
    <!-- Tab切换 -->
    <view class="tab-container">
      <view class="tab-item" :class="{ active: activeTab === 'system' }" @click="switchTab('system')">
        <text class="tab-text">系统设置</text>
        <view class="tab-underline" v-if="activeTab === 'system'">  
        </view>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'charging' }" @click="switchTab('charging')">
        <text class="tab-text">共享充电桩设置</text>
        <view class="tab-underline" v-if="activeTab === 'charging'">
         
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view v-if="activeTab === 'system'" class="system-settings">
      <!-- Logo和应用信息 -->
      <view class="app-info">
        <image class="app-logo" src="/static/images/settings/logo.png" mode="aspectFit"></image>
         <text class="version-text">版本号：1.0</text>
      </view>
    </view>

    <!-- 共享充电桩设置内容 -->
     <view v-if="activeTab === 'charging'" class="charging-settings">
       <!-- 充电桩编号 -->
        <view class="pile-number-container">
          <view class="pile-info">
           
            <text class="pile-number">琼A00000</text>
           <text class="pile-status">更换绑定车辆</text>
           
         
       </view>
        </view>
       <!-- 设置项列表 -->
        <view class="settings-container">
          <view class="settings-list">
         <!-- 开启/停止充电 -->
         <view class="setting-item">
           <text class="setting-label">开启/停止运营</text>
           <switch :checked="chargingEnabled" @change="toggleCharging" color="#00D4AA" />
         </view>

         <!-- 运营时间 -->
         <view class="setting-item clickable" @click="setOperatingTime">
           <text class="setting-label">运营时间</text>
           <view class="setting-value">
             <text class="value-text">请设置</text>
             <text class="arrow">></text>
           </view>
         </view>

         <!-- 自定义电费 -->
         <view class="setting-item">
           <text class="setting-label">自定义电费</text>
           <switch :checked="customElectricityFee" @change="toggleCustomFee" color="#00D4AA" />
         </view>
       </view>

        </view>
       

       <!-- 收费时段表格 -->
        <view class="fee-schedule-container">
         <view class="fee-schedule">
         <view class="schedule-header">
           <text class="header-item">收费时段</text>
           <text class="header-item">充电单价 </text>
           <text class="operator" >=</text>

           <text class="header-item">电费</text>
           <text class="operator" >+</text>
           <text class="header-item">服务费 </text>
           <text class="operator">+</text>
           <text class="header-item">占位费</text>
         </view>
         <view class="schedule-subheader">
           <text class="subheader-item"></text>
           <text class="subheader-item">元/度</text>
           <text class="subheader-item">元/度</text>
           <text class="subheader-item">元/度</text>
           <text class="subheader-item">元/度</text>
         </view>
         
         <view class="schedule-row" v-for="(schedule, index) in feeSchedules" :key="index" :class="{ highlighted: schedule.highlighted }">
           <text class="row-item time">{{ schedule.time }}</text>
           <text class="row-item price">{{ schedule.chargingPrice }}</text>
           <text class="row-item price-other">{{ schedule.electricityFee }}</text>
           <text class="row-item price-other">{{ schedule.serviceFee }}</text>
           <text class="row-item price-other">{{ schedule.parkingFee }}</text>
           <!-- 现字图标浮动框 -->
           <view v-if="schedule.highlighted" class="current-indicator">
             <text class="current-text">现</text>
           </view>
         </view>
       </view>
        </view>
       

       <!-- 占位处罚 -->
       <view class="setting-item last-item">
         <text class="setting-label">占位处罚</text>
         <switch :checked="parkingPenalty" @change="toggleParkingPenalty" color="#00D4AA" />
       </view>

       <!-- 底部按钮组 -->
       <view class="bottom-buttons">
         <view class="action-btn repair-btn" @click="reportMalfunction">
           <text class="btn-text">故障报修</text>
         </view>
         
         <view class="action-btn repair-btn" @click="reportMalfunction">
           <text class="btn-text" @click="callService">客服电话：123-456-7890</text>
         </view>
         <!-- <view class="contact-info ">
           <text class=" contact-label"></text>
           <text class="contact-number" ></text>
         </view> -->
         
         <text class="agreement-text" @click="viewAgreement">申请解除协议/移动充电桩</text>
       </view>
     </view>

    <!-- 底部按钮 -->
    <view v-if="activeTab === 'system'"  class="bottom-action">
      <view class="action-button" @click="applySharedCharging">
        <image class="button-bg" src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/settings/banner_little@2x.png" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import CustomNavBar from '@/components/CustomNavBar.vue'

const activeTab = ref('system');

// 切换Tab
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 充电桩设置相关状态
const chargingEnabled = ref(true);
const customElectricityFee = ref(false);
const parkingPenalty = ref(true);

// 收费时段数据
const feeSchedules = ref([
  { time: '00:00-02:00', chargingPrice: '0.7100', electricityFee: '0.4600', serviceFee: '0.2500', parkingFee: '1.00', highlighted: false },
  { time: '02:00-09:00', chargingPrice: '0.7100', electricityFee: '0.6900', serviceFee: '0.2400', parkingFee: '1.00', highlighted: false },
  { time: '09:00-11:00', chargingPrice: '0.7100', electricityFee: '0.9300', serviceFee: '0.2600', parkingFee: '2.00', highlighted: true },
  { time: '11:00-13:00', chargingPrice: '0.9300', electricityFee: '0.4600', serviceFee: '0.2500', parkingFee: '2.00', highlighted: false },
  { time: '13:00-16:00', chargingPrice: '0.4900', electricityFee: '0.6900', serviceFee: '0.2400', parkingFee: '3.00', highlighted: false },
  { time: '16:00-20:00', chargingPrice: '0.8900', electricityFee: '0.9300', serviceFee: '0.2600', parkingFee: '2.00', highlighted: false },
  { time: '20:00-22:00', chargingPrice: '1.5900', electricityFee: '0.4600', serviceFee: '0.2500', parkingFee: '2.00', highlighted: false },
  { time: '22:00-24:00', chargingPrice: '1.3900', electricityFee: '0.6900', serviceFee: '0.2400', parkingFee: '1.00', highlighted: false }
]);

// 切换充电状态
const toggleCharging = (e) => {
  chargingEnabled.value = e.detail.value;
};

// 切换自定义电费
const toggleCustomFee = (e) => {
  customElectricityFee.value = e.detail.value;
};

// 切换占位处罚
const toggleParkingPenalty = (e) => {
  parkingPenalty.value = e.detail.value;
};

// 设置运营时间
const setOperatingTime = () => {
  uni.showToast({
    title: '设置运营时间功能开发中',
    icon: 'none'
  });
};

// 故障报修
const reportMalfunction = () => {
  uni.showToast({
    title: '故障报修功能开发中',
    icon: 'none'
  });
};

// 拨打客服电话
const callService = () => {
  uni.makePhoneCall({
    phoneNumber: '123-456-7890'
  });
};

// 查看协议
const viewAgreement = () => {
  uni.showToast({
    title: '查看协议功能开发中',
    icon: 'none'
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 申请共享充电桩
const applySharedCharging = () => {
  // 这里可以添加申请逻辑
  uni.showToast({
    title: '申请功能开发中',
    icon: 'none'
  });
};

onLoad(() => {
  // 页面加载时的初始化逻辑
});
</script>

<style scoped>
.settings-page {
  min-height: 100vh;
  background-color: #ffff;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 16px 12px;
  background-color: #fff;
  position: relative;
}

.nav-left {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-back {
  font-size: 24px;
  color: #333;
  font-weight: 300;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-more {
  font-size: 20px;
  color: #333;
}

.nav-record {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}

/* Tab切换 */
.tab-container {
  display: flex;
  background-color: #fff;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;
}

.tab-item {
  flex: 1;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.tab-text {
  font-size: 16px;
  color: #000000;
  transition: color 0.3s;
}

.tab-item.active .tab-text {
  /* color: #00D4AA; */
  font-weight: 500;
}

.tab-underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 1px;
  background-color: #00D4AA;
  border-radius: 2px;
}

/* 系统设置样式 */
.system-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 60px 16px;
}

/* 共享充电桩设置样式 */
.charging-settings {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}
.pile-number-container{
  background: white;
  padding: 20px;
  border-bottom: 1px solid #f5f5f5;
}
.pile-info {
  background: white;
  padding: 0px 16px 0px 16px ;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 8px; */
}

.pile-number {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.pile-status {
  font-size: 14px;
  color: #00D4AA;
}

.settings-list {
  background: white;
  padding: 0px 20px 0px 20px;
  /* margin-bottom: 8px; */
}

.setting-item {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item.last-item {
  background: white;
  padding: 0px 20px 10px 20px;
  /* margin-top: 8px; */
  border-bottom: 1px solid #f5f5f5;
}

.setting-item.clickable {
  cursor: pointer;
}

.setting-label {
  font-size: 14px;
  color: #7A7A7C;
}

.setting-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.value-text {
  font-size: 14px;
  color: #666;
}

.arrow {
  font-size: 14px;
  color: #999;
}

/* 收费时段表格 */
.fee-schedule {
  background: white;
  /* margin-bottom: 8px; */
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  /* padding:10px; */
}
.fee-schedule-container{
  background: white;
  padding: 10px;
}
.schedule-header {
  display: flex;
  padding: 12px 16px 0px 16px;
  background: #f8f9fa;
  /* border-bottom: 1px solid #e9ecef; */
}

.schedule-subheader {
  display: flex;
  padding: 8px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.header-item{
  flex: 10;
  text-align: center;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}
.operator{
  flex: 1;
  text-align: center;
  color: #666;
  font-weight: 500;
  font-size: 11px;
}
.header-text{
 font-size:12px;
 padding-left:2px;
}
.subheader-item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.header-item:first-child,
.subheader-item:first-child {
  text-align: left;
}

.schedule-row {
  display: flex;
  padding: 12px 16px;
  /* border-bottom: 1px solid #DCDFEC; */
  position: relative;
}

.schedule-row.highlighted {
  /* background: #e8f8f5; */
  border: 1px solid #00D4AA;
  border-radius: 5px;
}

.current-indicator {
  position: absolute;
  /* top: -8px; */
  left: -2px;
  background: hsl(168, 68%, 81%);
  color:#00D4AA;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  z-index: 10;
}

.current-text {
  font-size: 10px;
  font-weight: bold;
  color: #00D4AA;
}

.schedule-row:last-child {
  border-bottom: none;
}

.row-item {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: #333;
}

.row-item.time {
  text-align: left;
  font-weight: 400;
  color:black;
  white-space: nowrap;
}

.row-item.price {
  font-weight: 540;
  font-size: 15px;
  color: black;
}
.row-item.price-other {
  font-weight: 400;
  color: black;
}

/* 底部按钮组 */
.bottom-buttons {
  padding: 16px;
  background: white;
}

.action-btn {
  width: 93%;
  padding: 13px;
  border-radius: 25px;
  text-align: center;
  margin-bottom: 16px;
}

.repair-btn {
  background: #e9ecef;
  color: #333;
}

.btn-text {
  font-size: 16px;
  font-weight: 500;
}

.contact-info {
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.contact-label {
  font-size: 14px;
  color: #666;
}

.contact-number {
  font-size: 14px;
  color: #00D4AA;
  text-decoration: underline;
}

.agreement-text {
  text-align: center;
  font-size: 12px;
  color: #999;
  /* text-decoration: underline; */
  display: block;
}

.app-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.app-logo {
  width: 234px;
  height: 51px;
  margin-bottom: 16px;
}

.app-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.app-subtitle {
  font-size: 16px;
  color: #666;
}

.version-info {
  margin-top: 20px;
}

.version-text {
  font-size: 15px;
  color: #000000 ;
}

/* 底部按钮 */
.bottom-action {
  padding: 20px 16px 40px;
}

.action-button {
  position: relative;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.button-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.button-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.button-subtitle {
  font-size: 12px;
  color: #fff;
  opacity: 0.9;
}
</style>